<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">

  <title>Login</title>

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">

  <!-- Styles -->
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/bootstrap/css/bootstrap.min.css"
        rel="stylesheet">
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/font-awesome/css/font-awesome.min.css"
        rel="stylesheet">
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/icomoon/style.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/uniform/css/default.css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/switchery/switchery.min.css"
        rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/templates/assets/plugins/nvd3/nv.d3.min.css" rel="stylesheet">

  <!-- Theme Styles -->
  <link href="${pageContext.request.contextPath}/templates/assets/css/ecaps.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/templates/assets/css/custom.css" rel="stylesheet">

</head>

<body>

<!-- Page Container -->
<div class="page-container">
  <!-- Page Sidebar -->
  <div class="page-sidebar">
    <a class="logo-box" href="index.html">
      <span>ecaps</span>
      <i class="icon-radio_button_unchecked" id="fixed-sidebar-toggle-button"></i>
      <i class="icon-close" id="sidebar-toggle-button-close"></i>
    </a>
    <div class="page-sidebar-inner">
      <div class="page-sidebar-menu">
        <ul class="accordion-menu">
          <li class="active-page">
            <a href="index.html">
              <i class="menu-icon icon-home4"></i><span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="email.html">
              <i class="menu-icon icon-inbox"></i><span>Email</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-flash_on"></i><span>UI Kits</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="ui-alerts.html">Alerts</a></li>
              <li><a href="ui-buttons.html">Buttons</a></li>
              <li><a href="ui-icons.html">Icons</a></li>
              <li><a href="ui-typography.html">Typography</a></li>
              <li><a href="ui-notifications.html">Notifications</a></li>
              <li><a href="ui-modals.html">Modals</a></li>
              <li><a href="ui-progress.html">Progress Bars</a></li>
              <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
              <li><a href="ui-tree-view.html">Tree View</a></li>
              <li><a href="ui-nestable.html">Nestable</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-layers"></i><span>Layouts</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="layout-blank.html">Blank Page</a></li>
              <li><a href="layout-boxed.html">Boxed Layout</a></li>
              <li><a href="layout-collapsed-sidebar.html">Collapsed Sidebar</a></li>
              <li><a href="layout-fixed-header.html">Fixed Header</a></li>
              <li><a href="layout-fixed-sidebar.html">Fixed Sidebar</a></li>
              <li><a href="layout-fixed-sidebar-header.html">Fixed Sidebar &amp; Header</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-code"></i><span>Forms</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="form-elements.html">Elements</a></li>
              <li><a href="form-wizard.html">Form Wizard</a></li>
              <li><a href="form-file-upload.html">File Upload</a></li>
              <li><a href="form-image-crop.html">Image Crop</a></li>
              <li><a href="form-image-zoom.html">Image Zoom</a></li>
              <li><a href="form-x-editable.html">X-editable</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-format_list_bulleted"></i><span>Tables</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="table-static.html">Static</a></li>
              <li><a href="table-responsive.html">Responsive</a></li>
              <li><a href="table-data.html">Data Tables</a></li>
            </ul>
          </li>
          <li>
            <a href="charts.html">
              <i class="menu-icon icon-show_chart"></i><span>Charts</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-my_location"></i><span>Maps</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="maps-google.html">Google</a></li>
              <li><a href="maps-vector.html">Vector</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon icon-star"></i><span>Extra</span><i class="accordion-icon fa fa-angle-left"></i>
            </a>
            <ul class="sub-menu">
              <li><a href="invoice.html">Invoice</a></li>
              <li><a href="404.html">404 Page</a></li>
              <li><a href="500.html">500 Page</a></li>
              <li><a href="profile.html">Profile</a></li>
              <li><a href="login.html">Login</a></li>
              <li><a href="register.html">Register</a></li>
              <li><a href="lockscreen.html">Lockscreen</a></li>
              <li><a href="todo.html">Todo</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="pricing-tables.html">Pricing Tables</a></li>
              <li><a href="timeline.html">Timeline</a></li>
            </ul>
          </li>
          <li class="menu-divider"></li>
          <li>
            <a href="index.html">
              <i class="menu-icon icon-help_outline"></i><span>Documentation</span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <i class="menu-icon icon-public"></i><span>Changelog</span><span class="label label-danger">1.0</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div><!-- /Page Sidebar -->

  <!-- Page Content -->
  <div class="page-content">
    <!-- Page Header -->
    <div class="page-header">
      <div class="search-form">
        <form action="#" method="GET">
          <div class="input-group">
            <input type="text" name="search" class="form-control search-input" placeholder="Type something...">
            <span class="input-group-btn">
                                    <button class="btn btn-default" id="close-search" type="button"><i class="icon-close"></i></button>
                                </span>
          </div>
        </form>
      </div>
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <div class="logo-sm">
              <a href="javascript:void(0)" id="sidebar-toggle-button"><i class="fa fa-bars"></i></a>
              <a class="logo-box" href="index.html"><span>ecaps</span></a>
            </div>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <i class="fa fa-angle-down"></i>
            </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="javascript:void(0)" id="collapsed-sidebar-toggle-button"><i class="fa fa-bars"></i></a></li>
              <li><a href="javascript:void(0)" id="toggle-fullscreen"><i class="fa fa-expand"></i></a></li>
              <li><a href="javascript:void(0)" id="search-button"><i class="fa fa-search"></i></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="javascript:void(0)" class="right-sidebar-toggle" data-sidebar-id="main-right-sidebar"><i class="fa fa-envelope"></i></a></li>
              <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bell"></i></a>
                <ul class="dropdown-menu dropdown-lg dropdown-content">
                  <li class="drop-title">Notifications<a href="#" class="drop-title-link"><i class="fa fa-angle-right"></i></a></li>
                  <li class="slimscroll dropdown-notifications">
                    <ul class="list-unstyled dropdown-oc">
                      <li>
                        <a href="http://www.datouwang.com/"><span class="notification-badge bg-primary"><i class="fa fa-photo"></i></span>
                          <span class="notification-info">Finished uploading photos to gallery <b>"South Africa"</b>.
                                                                <small class="notification-date">20:00</small>
                                                            </span></a>
                      </li>
                      <li>
                        <a href="#"><span class="notification-badge bg-primary"><i class="fa fa-at"></i></span>
                          <span class="notification-info"><b>John Doe</b> mentioned you in a post "Update v1.5".
                                                                <small class="notification-date">06:07</small>
                                                            </span></a>
                      </li>
                      <li>
                        <a href="#"><span class="notification-badge bg-danger"><i class="fa fa-bolt"></i></span>
                          <span class="notification-info">4 new special offers from the apps you follow!
                                                                <small class="notification-date">Yesterday</small>
                                                            </span></a>
                      </li>
                      <li>
                        <a href="#"><span class="notification-badge bg-success"><i class="fa fa-bullhorn"></i></span>
                          <span class="notification-info">There is a meeting with <b>Ethan</b> in 15 minutes!
                                                                <small class="notification-date">Yesterday</small>
                                                            </span></a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="dropdown user-dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="http://via.placeholder.com/36x36" alt="" class="img-circle"></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Profile</a></li>
                  <li><a href="#">Calendar</a></li>
                  <li><a href="#"><span class="badge pull-right badge-danger">42</span>Messages</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Account Settings</a></li>
                  <li><a href="#">Log Out</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    </div><!-- /Page Header -->
    <!-- Page Inner -->
    <div class="page-inner">
      <div class="page-title">
        <h3 class="breadcrumb-header">Dashboard</h3>
      </div>
      <div id="main-wrapper">
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <div class="panel panel-white stats-widget">
              <div class="panel-body">
                <div class="pull-left">
                  <span class="stats-number">$781,876</span>
                  <p class="stats-info">Total Income</p>
                </div>
                <div class="pull-right">
                  <i class="icon-arrow_upward stats-icon"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="panel panel-white stats-widget">
              <div class="panel-body">
                <div class="pull-left">
                  <span class="stats-number">578,100</span>
                  <p class="stats-info">Downloads</p>
                </div>
                <div class="pull-right">
                  <i class="icon-arrow_downward stats-icon"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="panel panel-white stats-widget">
              <div class="panel-body">
                <div class="pull-left">
                  <span class="stats-number">+23,356</span>
                  <p class="stats-info">New Registrations</p>
                </div>
                <div class="pull-right">
                  <i class="icon-arrow_upward stats-icon"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="panel panel-white stats-widget">
              <div class="panel-body">
                <div class="pull-left">
                  <span class="stats-number">58%</span>
                  <p class="stats-info">Finished Tasks</p>
                </div>
                <div class="pull-right">
                  <i class="icon-arrow_upward stats-icon"></i>
                </div>
              </div>
            </div>
          </div>
        </div><!-- Row -->
        <div class="row">
          <div class="col-lg-8 col-md-12">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Total Revenue</h4>
              </div>
              <div class="panel-body">
                <div id="chart1"><svg></svg></div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Server Status</h4>
              </div>
              <div class="panel-body">
                <div class="container-fluid">
                  <div class="server-load row">
                    <div class="server-stat col-sm-4">
                      <p>167GB</p>
                      <span>Usage</span>
                    </div>
                    <div class="server-stat col-sm-4">
                      <p>320GB</p>
                      <span>ecaps</span>
                    </div>
                    <div class="server-stat col-sm-4">
                      <p>57.4%</p>
                      <span>CPU</span>
                    </div>
                  </div>
                </div>
                <div id="chart2"><svg></svg></div>
              </div>
            </div>
          </div>
        </div><!-- Row -->
        <div class="row">
          <div class="col-lg-5 col-md-12">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Tasks</h4>
              </div>
              <div class="panel-body">
                <div class="task-list">
                  <div class="task-item">
                    <span class="task-name">Download 'Alpha' admin template</span>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
                        <span class="sr-only">80% Complete</span>
                      </div>
                    </div>
                  </div>
                  <div class="task-item">
                    <span class="task-name">Create a new landing page</span>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                        <span class="sr-only">10% Complete</span>
                      </div>
                    </div>
                  </div>
                  <div class="task-item">
                    <span class="task-name">Delete inactive users</span>
                    <div class="progress">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
                        <span class="sr-only">80% Complete</span>
                      </div>
                    </div>
                  </div>
                  <div class="task-item">
                    <span class="task-name">Update NVD3 chart plugin<i class="fa fa-check"></i></span>
                    <div class="progress">
                      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                        <span class="sr-only">100% Complete</span>
                      </div>
                    </div>
                  </div>
                  <div class="task-item">
                    <span class="task-name">Install 4 new layouts<i class="fa fa-check"></i></span>
                    <div class="progress">
                      <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                        <span class="sr-only">100% Complete</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-7 col-md-12">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Invoices</h4>
              </div>
              <div class="panel-body">
                <div class="table-responsive invoice-table">
                  <table class="table">
                    <tbody>
                    <tr>
                      <th scope="row">0567</th>
                      <td>Kenny Highland</td>
                      <td><span class="label label-success">Finished</span></td>
                      <td>$427</td>
                    </tr>
                    <tr>
                      <th scope="row">0186</th>
                      <td>Darrell Price</td>
                      <td>Twitter</td>
                      <td><span class="label label-success">Finished</span></td>
                      <td>$1714</td>
                    </tr>
                    <tr>
                      <th scope="row">0712</th>
                      <td>Richard Lunsford</td>
                      <td>Facebook</td>
                      <td><span class="label label-danger">Denied</span></td>
                      <td>$685</td>
                    </tr>
                    <tr>
                      <th scope="row">0095</th>
                      <td>Amy Walker</td>
                      <td>Youtube</td>
                      <td><span class="label label-warning">Pending</span></td>
                      <td>$9900</td>
                    </tr>
                    <tr>
                      <th scope="row">1054</th>
                      <td>Kathy Olson</td>
                      <td>Youtube</td>
                      <td><span class="label label-default">Upcoming</span></td>
                      <td>$1250</td>
                    </tr>
                    <tr>
                      <th scope="row">0043</th>
                      <td>Susan Mabry</td>
                      <td>Instagram</td>
                      <td><span class="label label-default">Upcoming</span></td>
                      <td>$399</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div><!-- Row -->
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Browsers</h4>
              </div>
              <div class="panel-body">
                <div class="browser-stats">
                  <ul class="list-unstyled">
                    <li><i class="fa fa-chrome"></i>Google Chrome<div class="text-success pull-right">32%<i class="fa fa-level-up"></i></div></li>
                    <li><i class="fa fa-firefox"></i>Firefox<div class="text-success pull-right">25%<i class="fa fa-level-up"></i></div></li>
                    <li><i class="fa fa-internet-explorer"></i>Internet Explorer<div class="text-success pull-right">16%<i class="fa fa-level-up"></i></div></li>
                    <li><i class="fa fa-safari"></i>Safari<div class="text-danger pull-right">13%<i class="fa fa-level-down"></i></div></li>
                    <li><i class="fa fa-opera"></i>Opera<div class="text-danger pull-right">7%<i class="fa fa-level-down"></i></div></li>
                    <li><i class="fa fa-tablet"></i>Mobile &amp; tablet<div class="text-success pull-right">4%<i class="fa fa-level-up"></i></div></li>
                    <li><i class="fa fa-hashtag"></i>Others<div class="text-success pull-right">3%<i class="fa fa-level-up"></i></div></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Projects</h4>
              </div>
              <div class="panel-body">
                <div class="project-stats">
                  <ul class="list-unstyled">
                    <li>Alpha - Admin Template<span class="label label-default pull-right">85%</span></li>
                    <li>Meteor - Landing Page<span class="label label-success pull-right">Finished</span></li>
                    <li>Modern - Corporate Website<span class="label label-success pull-right">Finished</span></li>
                    <li>ecaps - Admin Template<span class="label label-danger pull-right">Rejected</span></li>
                    <li>Backend UI<span class="label label-default pull-right">27%</span></li>
                    <li>Personal Blog<span class="label label-default pull-right">48%</span></li>
                    <li>E-mail Templates<span class="label label-default pull-right">Pending</span></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="panel panel-white">
              <div class="panel-heading clearfix">
                <h4 class="panel-title">Income</h4>
              </div>
              <div class="panel-body">
                <canvas id="chart3"></canvas>
              </div>
            </div>
          </div>
        </div><!-- Row -->
      </div><!-- Main Wrapper -->
      <div class="page-footer">
        <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
      </div>
    </div><!-- /Page Inner -->
    <div class="page-right-sidebar" id="main-right-sidebar">
      <div class="page-right-sidebar-inner">
        <div class="right-sidebar-top">
          <div class="right-sidebar-tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active" id="chat-tab"><a href="#chat" aria-controls="chat" role="tab" data-toggle="tab">chat</a></li>
              <li role="presentation" id="settings-tab"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">settings</a></li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="right-sidebar-toggle right-sidebar-close" data-sidebar-id="main-right-sidebar"><i class="icon-close"></i></a>
        </div>
        <div class="right-sidebar-content">
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="chat">
              <div class="chat-list">
                <span class="chat-title">Recent</span>
                <a href="javascript:void(0);" class="right-sidebar-toggle chat-item unread" data-sidebar-id="chat-right-sidebar">
                  <div class="user-avatar">
                    <img src="http://via.placeholder.com/40x40" alt="">
                  </div>
                  <div class="chat-info">
                    <span class="chat-author">David</span>
                    <span class="chat-text">where u at?</span>
                    <span class="chat-time">08:50</span>
                  </div>
                </a>
                <a href="javascript:void(0);" class="right-sidebar-toggle chat-item unread active-user" data-sidebar-id="chat-right-sidebar">
                  <div class="user-avatar">
                    <img src="http://via.placeholder.com/40x40" alt="">
                  </div>
                  <div class="chat-info">
                    <span class="chat-author">Daisy</span>
                    <span class="chat-text">Daisy sent a photo.</span>
                    <span class="chat-time">11:34</span>
                  </div>
                </a>
              </div>
              <div class="chat-list">
                <span class="chat-title">Older</span>
                <a href="javascript:void(0);" class="right-sidebar-toggle chat-item" data-sidebar-id="chat-right-sidebar">
                  <div class="user-avatar">
                    <img src="http://via.placeholder.com/40x40" alt="">
                  </div>
                  <div class="chat-info">
                    <span class="chat-author">Tom</span>
                    <span class="chat-text">You: ok</span>
                    <span class="chat-time">2d</span>
                  </div>
                </a>
                <a href="javascript:void(0);" class="right-sidebar-toggle chat-item active-user" data-sidebar-id="chat-right-sidebar">
                  <div class="user-avatar">
                    <img src="http://via.placeholder.com/40x40" alt="">
                  </div>
                  <div class="chat-info">
                    <span class="chat-author">Anna</span>
                    <span class="chat-text">asdasdasd</span>
                    <span class="chat-time">4d</span>
                  </div>
                </a>
                <a href="javascript:void(0);" class="right-sidebar-toggle chat-item active-user" data-sidebar-id="chat-right-sidebar">
                  <div class="user-avatar">
                    <img src="http://via.placeholder.com/40x40" alt="">
                  </div>
                  <div class="chat-info">
                    <span class="chat-author">Liza</span>
                    <span class="chat-text">asdasdasd</span>
                    <span class="chat-time">&nbsp;</span>
                  </div>
                </a>
                <a href="javascript:void(0);" class="load-more-messages"  data-toggle="tooltip" data-placement="bottom" title="Load More">&bull;&bull;&bull;</a>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
              <div class="right-sidebar-settings">
                <span class="settings-title">General Settings</span>
                <ul class="sidebar-setting-list list-unstyled">
                  <li>
                    <span class="settings-option">Notifications</span><input type="checkbox" class="js-switch" checked />
                  </li>
                  <li>
                    <span class="settings-option">Activity log</span><input type="checkbox" class="js-switch" checked />
                  </li>
                  <li>
                    <span class="settings-option">Automatic updates</span><input type="checkbox" class="js-switch" />
                  </li>
                  <li>
                    <span class="settings-option">Allow backups</span><input type="checkbox" class="js-switch" />
                  </li>
                </ul>
                <span class="settings-title">Account Settings</span>
                <ul class="sidebar-setting-list list-unstyled">
                  <li>
                    <span class="settings-option">Chat</span><input type="checkbox" class="js-switch" checked />
                  </li>
                  <li>
                    <span class="settings-option">Incognito mode</span><input type="checkbox" class="js-switch" />
                  </li>
                  <li>
                    <span class="settings-option">Public profile</span><input type="checkbox" class="js-switch" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-right-sidebar" id="chat-right-sidebar">
      <div class="page-right-sidebar-inner">
        <div class="right-sidebar-top">
          <div class="chat-top-info">
            <span class="chat-name">Noah</span>
            <span class="chat-state">2h ago</span>
          </div>
          <a href="javascript:void(0)" class="right-sidebar-toggle chat-sidebar-close pull-right" data-sidebar-id="chat-right-sidebar"><i class="icon-keyboard_arrow_right"></i></a>
        </div>
        <div class="right-sidebar-content">
          <div class="right-sidebar-chat slimscroll">
            <div class="chat-bubbles">
              <div class="chat-start-date">02/06/2017 5:58PM</div>
              <div class="chat-bubble them">
                <div class="chat-bubble-img-container">
                  <img src="http://via.placeholder.com/38x38" alt="">
                </div>
                <div class="chat-bubble-text-container">
                  <span class="chat-bubble-text">Hello</span>
                </div>
              </div>
              <div class="chat-bubble me">
                <div class="chat-bubble-text-container">
                  <span class="chat-bubble-text">Hello!</span>
                </div>
              </div>
              <div class="chat-start-date">03/06/2017 4:22AM</div>
              <div class="chat-bubble me">
                <div class="chat-bubble-text-container">
                  <span class="chat-bubble-text">lorem</span>
                </div>
              </div>
              <div class="chat-bubble them">
                <div class="chat-bubble-img-container">
                  <img src="http://via.placeholder.com/38x38" alt="">
                </div>
                <div class="chat-bubble-text-container">
                  <span class="chat-bubble-text">ipsum dolor sit amet</span>
                </div>
              </div>
            </div>
          </div>
          <div class="chat-write">
            <form class="form-horizontal" action="javascript:void(0);">
              <input type="text" class="form-control" placeholder="Say something">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /Page Content -->
</div>
<!-- /Page Container -->

<!-- JavaScripts -->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/templates/assets/plugins/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/templates/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/templates/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/templates/assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/templates/assets/plugins/switchery/switchery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/js/ecaps.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/d3/d3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/plugins/chartjs/chart.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/js/ecaps.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/templates/assets/js/pages/dashboard.js"></script>

</body>
</html>
